<template>
<div>   
    <div class="main-title">  
        <div v-show='isShowInfo'>活动编辑 - 基本信息</div>
        <div v-show='!isShowInfo'>活动编辑 - 配置信息</div>
        <div class="title-type"><span>*</span> 标为必填, 无<span> * </span>标为选填</div>
    </div>
    <el-steps :active="active" finish-status="success">
        <el-step title="基本信息" @click.native='handleBase' style='cursor: pointer;'></el-step>
        <el-step title="配置信息" @click.native='handleClick' style='cursor: pointer;'></el-step>
    </el-steps>
    <mod-base 
    v-show='this.isShowInfo' 
    @next="netStep" 
    @changeDate1='getDate1' 
    @changeDate2='getDate2' 
    @changeTime1='getTime1' 
    @changeTime2='getTime2'>
        
    </mod-base>
    <mod-advanced 
    :actionTime1='actionTime1' 
    :actionTime2='actionTime2' 
    :actionDate1='actionDate1' 
    :actionDate2='actionDate2'
    :isShowInfo.sync='isShowInfo' 
    v-show='!this.isShowInfo' 
    :id='id' 
    @next="netStep">
        
    </mod-advanced>
</div>
</template>

<script>
import ModBase from './mod_base.vue'
import ModAdvanced from './mod_advanced.vue'
    export default {
        data() {
            return {
                id: this.$route.params.id,
                active: 0,
                commonlist:[],
                isShowInfo:true,
                actionTime1:'',
                actionDate1:'',
                actionDate2:'',
                actionTime2:''
            }
        },

        methods:{
            handleClick(){
                this.isShowInfo = false;
                this.active = 1;
            },

            handleBase(){
                this.isShowInfo = true;
                this.active = 0;
            },

            getTime1(val){
               this.actionTime1 = val
            },

            getTime2(val){
               this.actionTime2 = val
            },

            getDate2(val){
               this.actionDate2 = val
            },

            getDate1(val){
               this.actionDate1 = val
            },


            netStep() {
                if (this.active++ > 1){
                    this.active = 0;
                }
                this.isShowInfo = false;
                window.scrollTo(0,0)
            }
        },

        components:{
            'mod-base':ModBase,
            'mod-advanced':ModAdvanced
        }

    }
</script>

<style scoped>
  .main-title{
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #ccc;
    font-size: 16px;
    padding-bottom: 15px;
    margin-bottom: 15px;
    color: #569efe;
  }   
  .title-type{
    font-size: 12px;
    color: #aaa;

  }
  .title-type > span{
    color: #f00;
  }  
  .el-steps{
    width: 140px;
    height: 30px;
    margin:10px auto;
  }
</style>